<template>
  <div ref="chartContainerMem" :style="{ width: '100%', height: '400px' }"></div>
</template>

<script setup>
import * as echarts from 'echarts';
import { ref, onMounted, watch, defineProps, toRefs } from 'vue';

const props = defineProps({
  resData: {
    type: Object,
    required: true
  },
});

const { resData } = toRefs(props);

const chartContainerMem = ref(null);
const chartInstanceMem = ref(null);
const seriesDataCache = ref([])


const updateCharts = (data) => {
  if (!chartInstanceMem.value) {
    chartInstanceMem.value = echarts.init(chartContainerMem.value);
  }

  // 转换数据格式
  const transformedData = {};
  Object.keys(data).forEach(key => {
    const newKey = key.replace('vm_', '');
    transformedData[newKey] = data[key];
  });

  // 获取横坐标
  let xAxisData = [];
  for (const key in transformedData) {
    if (transformedData[key].length > 0) {
      xAxisData = transformedData[key].map((item, index) => {
        if (index === 0) {
          return item.TimeStr;
        }
        return item.TimeStr.split(' ')[1]; 
      });
      break;
    }
  }

  // 获取每个设备的 mem_used_percent
  const seriesData = Object.keys(transformedData).map(key => {
    return {
      name: key,
      type: 'line',
      smooth: true,
      data: transformedData[key].map(item => parseFloat(item.mem_used_percent).toFixed(2)) 
    };
  });
  seriesDataCache.value = seriesData


  const legend = Object.keys(transformedData);

  const option = {
    // tooltip: {
    //   trigger: 'axis',
    //   formatter: function (params) {
    //     let tooltipContent = `${params[0].axisValue}<br/>`;
    //     params.forEach(param => {
    //       tooltipContent += `${param.marker} ${param.seriesName}: ${param.data.value}%<br/>`;
    //     });
    //     return tooltipContent;
    //   }
    // },
    // tooltip: {
    //   formatter: function (params) {
    //     return `${params.seriesName} <br> ${params.name}   ${params.value}%`
    //   },
    // },
    tooltip: {
      formatter: function (params) {
        // console.log("params",params,seriesDataCache.value)  //dataIndex
        let init = ` ${params.name} <br> ${params.seriesName} - ${params.value}%  <br> `
        seriesDataCache.value.forEach(element => {
          if(element.name === params.seriesName){
            // console.log("element",element)
          }else {
            init +=  ` ${element.name} - ${element.data[params.dataIndex]}%  <br> `
          }
        });
        return init
      },
    },
    grid: {
      left: '3%',
      right: '3%',
      bottom: '3%',
      containLabel: true
    },
    legend: {
      data: legend
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: xAxisData
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        formatter: '{value} %' 
      }
    },
    series: seriesData
  };
  console.log("option", option);

  chartInstanceMem.value.setOption(option);
};

onMounted(() => {
  updateCharts(resData.value);
});

watch(() => resData.value, (newVal) => {
  updateCharts(newVal);
});
</script>

<style lang="less">
</style>
